<template>
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">⚡ ROI转化分析</h3>
      <el-button link text type="primary" @click="handleSetting">设置</el-button>
    </div>

    <div class="grid">
      <!-- 总投入 -->
      <div class="stat-box">
        <div class="icon-wrapper red-bg">
          <img :src="zrtImg" alt="" />
        </div>
        <div class="stat-content">
          <div class="stat-label">总投入</div>
          <div class="stat-value red">¥15,000</div>
        </div>
      </div>

      <!-- 总收入 -->
      <div class="stat-box">
        <div class="icon-wrapper">
          <img :src="zsrImg" alt="" />
        </div>
        <div class="stat-content">
          <div class="stat-label">总收入</div>
          <div class="stat-value green">¥89,123</div>
        </div>
      </div>

      <!-- ROI -->
      <div class="stat-box">
        <div class="icon-wrapper">
          <img :src="roiImg" alt="" />
        </div>
        <div class="stat-content">
          <div class="stat-label">ROI</div>
          <div class="stat-value blue">594%</div>
        </div>
      </div>

      <!-- 转化率 -->
      <div class="stat-box">
        <div class="icon-wrapper">
          <img :src="zhlImg" alt="" />
        </div>
        <div class="stat-content">
          <div class="stat-label">转化率</div>
          <div class="stat-value purple">23.5%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// ztr 总投入
import zrtImg from '@/assets/images/dashboard/admin/ztr.png';
// zsr 总收入
import zsrImg from '@/assets/images/dashboard/admin/zsr.png';
// ROI ROI
import roiImg from '@/assets/images/dashboard/admin/ROI.png';
// zhl 转化率
import zhlImg from '@/assets/images/dashboard/admin/zhl.png';
import { ElMessageBox } from 'element-plus';

// 设置 点击打开element得输入弹窗组件
const handleSetting = () => {
  // 打开弹窗 验证输入的一定是合法的投入金额 否则提示用户输入错误
  ElMessageBox.prompt('请输入投入金额', '设置金额', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputValue: '',
    inputValidator: (value) => {
      // 验证输入的是否是合法的投入金额
      if (!/^\d+(\.\d{1,2})?$/.test(value)) {
        return '请输入合法的投入金额';
      }
      return true;
    }
  })
    .then((value) => {
      console.log('设置值:', value);
    })
    .catch(() => {
      console.log('取消设置');
    });
};
</script>

<style lang="scss" scoped>
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 6px;
}

.link {
  font-size: 13px;
  color: #409eff;
  text-decoration: none;
  font-weight: 500;
}

.link:hover {
  text-decoration: underline;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1; /* 关键：占满剩余高度 */
  min-height: 0;
}

.stat-box {
  display: flex;
  align-items: center;
  background: #f9fafb;
  border-radius: 10px;
  padding: 14px;
  transition: all 0.2s ease;
  height: 100%; /* 铺满高度 */
}

.stat-box:hover {
  background: #f1f5f9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;
  margin-right: 12px;
  flex-shrink: 0;

  img {
    width: 45px;
  }
}

.icon {
  font-size: 18px;
}

.red-bg {
  background: #ffebee;
  color: #e53935;
}

.green-bg {
  background: #e8f5e8;
  color: #43a047;
}

.blue-bg {
  background: #e3f2fd;
  color: #1e88e5;
}

.stat-content {
  flex: 1;
  text-align: center;
}

.stat-label {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.stat-value {
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 26px;
  color: #333333;
}

.red {
  color: #e53935;
}

.green {
  color: #43a047;
}

.blue {
  color: #1e88e5;
}

.purple {
  color: #6a1b9a;
}
</style>
